<script setup lang="ts">
import { ref } from 'vue';

interface Tree {
  title: string
  child?: Tree[]
}

const treeData = ref<Tree[]>([
  {
    title: '阿里',
    child: [
      { title: '淘宝' },
      { 
        title: '支付宝',
        child: [
          { title: '花呗' },
          { title: '借呗' },
        ]
      },
      { title: '天猫' },
      { title: '饿了么' },
    ]
  },
  {
    title: '腾讯',
    child: [
      { title: 'QQ' },
      { title: '微信' },
      { title: 'QQ音乐' },
      { title: '腾讯视频' },
    ]
  },
  {
    title: '字节',
    child: [
      { title: '抖音' },
      { title: 'TikTop' },
    ]
  },
  {
    title: '百度'
  }
])

const defaultProps = {
  label: 'title',
  children: 'child',
}
const color1 = ref('red')
const color2 = ref('green')
const color3 = ref('blue')
const color4 = ref('purple')
const color5 = ref('cyan')
const changeColor1 = ()=>{
  color1.value = 'pink'
}
</script>

<template>
  <!-- <el-tree style="max-width: 600px" :data="treeData" :props="defaultProps" default-expand-all show-checkbox /> -->

  <input v-focus type="text">

    <div v-color="color1">你好, 中国</div>
    <div v-color="color2">中国, 你好</div>
    <div v-color="color3">北京, 中国</div>
    <div v-color="color4">上海, 中国</div>
    <div v-color="color5">杭州, 中国</div>

    <button @click="changeColor1">修改颜色1</button>
</template>

<style lang="scss" scoped></style>
